<template>
  <div id="backLogin">
    <h1>- 登录 -</h1>
    <p>邮箱</p>
    <input type="text" v-model="mail">
    <button @click="spendCode()" v-show="spendShow">发送验证码</button>
    <button id="wait" v-show="!spendShow">请等待{{ waitTime }}s后重试</button>
    <p>验证码</p>
    <input type="text" v-model="code">
    <button @click="checkCode()">验证登录</button>
    <a href="/#/back">若登录成功后没反应，可以点我跳转</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mail: '',
      code: '',
      spendShow: true,
      waitTime: 60,
    }
  },
  methods: {
    // 发送验证码
    spendCode() {
      // 改变按钮显示
      this.spendShow = false
      let buttonShowInterval = window.setInterval(() => {
        if (this.waitTime) {
          this.waitTime = this.waitTime - 1
        } else {
          this.spendShow = true
          window.clearInterval(buttonShowInterval)
          this.waitTime = 60
        }
      }, 1000)
      // 准备数据
      let data = new FormData()
      data.append("mail", this.mail)
      // 发送请求
      this.$axios({
        method: 'post',
        url: '/admin/mailCheck',
        data: data,
        headers: {
          'Content-Type': 'application/x-www-form-urlcoded'
        }
      }).then(res => {
        if (res.data) {
          alert("邮箱验证码已发送，请注意查收(可能在垃圾箱中)")
        } else {
          alert("邮箱为非管理员邮箱，请联系相关人员")
          // 按钮状态复位
          this.waitTime = 60
          this.spendShow = true
        }
      })
    },
    // 验证邮箱验证码
    checkCode() {
      this.$axios({
        method: 'post',
        url: '/admin/checkTheCode/' + this.mail + '/' + this.code
      }).then(res => {
        if (res.data) {
          // 获取token，并存入SessionStorage
          this.getToken(this.mail)
          alert("验证成功！欢迎您，管理员")
          // this.$router.go(-1)
          console.log(this);
          this.$router.push('/back').catch(() => { }) // 回到后台页面，catch避免报错==
        } else {
          alert("验证失败！请重试")
        }
      })
    },
    // 获取token
    async getToken(mail) {
      await this.$axios({
        method: 'post',
        url: '/admin/getToken/' + mail
      }).then(res => {
        // 存入sessionStorage中
        sessionStorage.setItem("token", res.data)
        return true
      })
    },
  }
}
</script>

<style lang="scss" scoped>
#backLogin {
  height: 330px;
  width: 400px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: $color-background-assistant;
  border-radius: 20px;
}

h1 {
  color: $color-main-text;
  font-size: $font-size-medium;
  font-weight: $font-weight-medium;
  text-align: center;
  margin: 10px 0;
}

p {
  color: $color-main-text;
  font-size: $font-size-small;
  font-weight: $font-weight-medium;
  text-align: center;
  margin: 10px 0;
}

input {
  display: block;
  margin: 0 auto;
  background-color: $color-background-assistant;
  height: 30px;
  width: 50%;
  border-radius: 20px;
  border: 1px solid $color-main-text;
  text-align: center;
  color: $color-main-text;
}

button {
  display: block;
  margin: 10px auto;
  background-color: $color-background;
  color: $color-main-text;
  width: 30%;
  height: 35px;
  border-radius: 20px;
  cursor: pointer;
}

#wait {
  background-color: $color-background-assistant;
  border: none;
  cursor: auto;
}

a {
  color: $color-main-text;
  position: fixed;
  bottom: 10px;
  right: 10px;
}</style>